<template>
    <div>
        <div class="app_header">
            <h3>应用管理</h3>
            <p>{{description}}</p>
            <div class="list_card_info">
                <div  v-for="(item,i) in linkList" :key="i">
                    <a-icon :type="item.icon" />
                    <a :href="item.href" style="margin-left: 10px">{{item.title}}</a>
                </div>
            </div>

                <img :src="extraImage" alt="" style="width: 80px;height: 80px;float: right;margin: 10px 40px">



        </div>
        <card-list/>
    </div>
</template>

<script>
    import CardList from "@/components/list/CardList";
    export default {
        name: "AppManger",
        components:{
           CardList
        },data(){
            return{
                description: '蚂蚁金服务设计平台 ant.design，提供跨越设计与开发的体验解决方案。',
                linkList: [
                    { icon: 'rocket', href: '#', title: '快速开始' },
                    { icon: 'info-circle-o', href: '#', title: '产品简介' },
                    { icon: 'file-text', href: '#', title: '产品文档' }
                ],
                extraImage: 'https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png',
            }
        }
    }
</script>

<style scoped>
    .app_header{
        width: 100%;
        height: 100px;
        background-color:#FFFFFF;
        margin-bottom: 20px;


    }
    h3{
        font-size: 1.8rem;
        font-weight:normal;
        line-height: 1.2;
        text-align: left;
        position: absolute;
        margin: 20px 40px;

}
.app_header p{
    position: absolute;
    margin-top: 30px;
    margin-left: 180px;
}
    .app_header .list_card_info{
       margin:70px 40px;
        position: absolute;

    }
    .app_header .list_card_info div{
        width: 100px;
        float: left;
        font-size: 16px;
        color: #1890ff;
    }



</style>
